import Vue from 'vue'
const ChildComponent = {
  template: `<div>this is child Component</div>`,
  inject: ['yeye', 'test'],
  mounted () {
    console.log(this.yeye, this.test)
  }
}
const component = {
  template: `
    <div :style="sty">
        <slot :value="value" aaa="aaa"></slot>
        {{value}}
        <child-comp/>
    </div>
    `,
  components: {
    childComp: ChildComponent
  },
  data () {
    return {
      sty: {
        width: '100px',
        height: '100px',
        border: '1px solid red'
      },
      value: '1234'
    }
  }
}
new Vue({
  el: '#root',
  data: {
    value: 'this is content'
  },
  provide () {
    return {
      yeye: this,
      test: 'this'
    }
  },
  template: `
    <div>
    <com>
    <span slot-scope="props">{{props.value}}{{props.aaa}}{{value}}</span>
    </com>
    </div>`,
  components: {
    com: component
  }
})
